<template>
    <div class="input-wrapper" :class="{ 'error': errorMessage, 'required': required }">
        <div v-if="$slots.label || label">
            <slot name="label"></slot>
            <div v-if="!$slots.label">{{ label }}</div>
            <span v-if="required" class="required">*</span>
        </div>

        <div class="input-container">
            <input :type="type"
            v-bind="$attrs"
            :value="modelValue"
            @input="handleInput($event)"
            @blur="handleBlur($event)"
            ref = "input" />
        </div>
        <div v-if="errorMessage" class="error-wrapper">
            {{ errorMessage }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'CusInput',
        props: {
            type: {
                type: String,
                default: 'text'
            },
            label: {
                type: String,
                default: ''
            },
            required: {
                type: Boolean,
                default: false
            },
            modelValue: {
                type: String,
                default: ''
            },
            validator : {
                type: Function,
            }
        },
        data() {
            return {
                errorMessage: '',
            }
        },
        methods: {
            handleInput(event) {
                this.$emit('update:modelValue', event.target.value)
            },
            handleBlur(event) {
                if (this.validator) {
                    const result = this.validator(event.target.value)
                    this.errorMessage = result === true ? '' : result
                }  
            },
        },
        beforeCreate() {
            console.log('beforeCreate', this.$options.name, this.$refs.input)
        },
        created() {
            console.log('created', this.$options.name, this.$refs.input)
        },
        mounted() {
            console.log('mounted', this.$options.name, this.$refs.input)
        },
        updated() {
            console.log('updated', this.$options.name, this.$refs.input)
        },
        beforeDestroy() {
            console.log('beforeDestroy', this.$options.name, this.$refs.input)
        },
        destroyed() {
            console.log('destroyed', this.$options.name, this.$refs.input)
        }
    }
</script>

<style scoped>
    .input-wrapper {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .input-wrapper > div:first-child {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        font-size: 14px;
        color: #333;
    }

    .required {
        margin-left: 2px;
        color: #e53935;
    }

    .input-container {
        position: relative;
    }

    .input-container input {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        background-color: #fff;
        border: 1px solid #c0c4cc;
        border-radius: 4px;
        transition: border-color .2s;
        box-sizing: border-box;
    }

    .input-container input:focus {
        outline: none;
        border-color: #409eff;
    }

    .input-wrapper.error .input-container input {
        border-color: #e53935;
    }

    .error-wrapper {
        margin-top: 4px;
        font-size: 12px;
        color: #e53935;
        line-height: 1.3;
    }
</style>